<template>
  <VueDragResize
    ref="resize"
    :isActive="true"
    :w="fixedEl.offsetWidth * 0.6"
    :h="fixedEl.offsetHeight * 0.6"
    :x="fixedEl.offsetWidth * 0.2"
    :y="fixedEl.offsetHeight * 0.2"
    v-on:resizing="resize"
    :style="frameStyle"
    :process="process"
  >
    <el-card class="box-card">
      <!-- header能够触发移动-->
      <div
        slot="header"
        class="frame_header_div"
        @mousedown="focus(process)"
      >
        <el-row class="el-row-height-full">
          <el-col :span="12" class="el-col-height-full">
            <slot name="frame_header_inner"></slot>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <i  class="el-icon-d-arrow-left  middle-child" @click="panelToLeft"></i>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <i  class="el-icon-d-arrow-right  middle-child" @click="panelToRight"></i>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <i  class="el-icon-refresh middle-child" @click="shortcut"></i>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <!-- 应用头部菜单区域 -->
            <i  @click="miniscreen" class="el-icon-minus middle-child"></i>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <!-- 应用头部菜单区域 -->
            <i :class="fullClass" @click="fullscreen"></i>
          </el-col>
          <el-col :span="2" class="middle-parent hred el-col-height-full">
            <!-- 应用头部菜单区域 -->
            <i
              class="el-icon-close middle-child"
              @click="closeApp"
            ></i>
          </el-col>
        </el-row>
      </div>
      <div
        style="width: 100%; height: 100%"
        v-loading="process.isLoading"
        @mousedown.stop="FOUCUSAPP(process)"
      >
     <component :is="com_show"></component>

      </div>
    </el-card>
  </VueDragResize>
</template>

<script>
import VueDragResize from "vue-drag-resize";
import html2canvas from 'html2canvas'
import { mapActions, mapMutations } from "vuex";
import AppEnum from '../classes/AppEnum'
import Setting from '../components/apps/Setting.vue'
import Vue from 'vue'
export default {
  name: "Frame",
  data() {
    return {
      downEvent: {
        positionX: 0,
        positionY: 0,
      },
      fullClass: {
        "el-icon-full-screen": true,
        "middle-child": true,
        "el-icon-copy-document": false,
      },
      historyData: {
        left: 0,
        bottom: 0,
        top: 0,
        right: 0,
      },
      positionData: {
        left: document.getElementById("content_frame") * 0.2,
        width: document.getElementById("content_frame") * 0.6,
        top: document.getElementById("content_frame") * 0.2,
        height: document.getElementById("content_frame") * 0.6,
      },
      fixedEl: document.getElementById("content_frame"),
      // 定位元素
      com_show:'Setting'
    };
  },
  props: {
    process: {
      type: Object,
      required: true,
    },
  },
  mounted(){
  },
  computed: {
    frameStyle() {
      const priority = this.process.priority;
      return { zIndex: priority};
    },
  },
  methods: {
    ...mapActions("appAbout", ["closeFrame"]),
    ...mapMutations("appAbout", ["FOUCUSAPP"]),
    resize(newRect) {
      // 改变状态
      this.fullClass["el-icon-copy-document"] = false;
      this.fullClass["el-icon-full-screen"] = true;
      this.positionData.width = newRect.width;
      this.positionData.height = newRect.height;
      this.positionData.top = newRect.top;
      this.positionData.left = newRect.left;
    },
    closeApp(){
      // 获取name
      let name = AppEnum.idToName(this.process.getAppId())
      // 获取App
      let app = AppEnum[name]
      // 调用closeApp
      app.closeApp(this.process.getId())
    },
    fullscreen() {
      const el = this.fixedEl;
      if (!this.fullClass["el-icon-copy-document"]) {
        this.historyData.left = this.$refs.resize.left;
        this.historyData.right = this.$refs.resize.right;
        this.historyData.top = this.$refs.resize.top;
        this.historyData.bottom = this.$refs.resize.bottom;
        this.$refs.resize.left = 0;
        this.$refs.resize.right = -el.offsetWidth;
        this.$refs.resize.top = 0;
        this.$refs.resize.bottom = -(el.offsetHeight * 0.9);
        this.fullClass["el-icon-copy-document"] = true;
        this.fullClass["el-icon-full-screen"] = false;
      } else {
        this.$refs.resize.left = this.historyData.left;
        this.$refs.resize.right = this.historyData.right;
        this.$refs.resize.top = this.historyData.top;
        this.$refs.resize.bottom = this.historyData.bottom;
        this.fullClass["el-icon-copy-document"] = false;
        this.fullClass["el-icon-full-screen"] = true;
      }
    },
    focus(){
      //console.log(this.fullClass["el-icon-copy-document"])
      this.FOUCUSAPP(this.process)
      // 同时改变大小
    },
    panelToRight(){
      this.$pubsub.publish(`${this.process.process_id}:panelToRight`)
    },
    panelToLeft(){
      this.$pubsub.publish(`${this.process.process_id}:panelToLeft`)
    },
    refresh(){
      this.$pubsub.publish(`${this.process.process_id}:refresh`)
    },
    miniscreen(){
      // 最小化 消失 display
    },
    // 实现后台任务的效果 
    shortcut(name){
    const frame = this.$refs.resize.$el
    // 获得窗口元素
    let el = document.getElementById(`img:${this.process.process_id}`)
    if(el) html2canvas(frame, {
        backgroundColor: '#e8f4ff',
        useCORS: true 
      }).then((canvas) => {
        // 获得base64
        const dataURL = canvas.toDataURL('image/png')
        // 将截图插入
         el.src=dataURL
      })
    }
  },
  components: {
    VueDragResize,
    Setting
  },
};
</script>

<style lang='less' scoped>
/deep/.el-card {
  height: 100%;
}
/deep/.vdr-stick {
  opacity: 0;
}
/deep/.el-card__header {
  height: 30px;
  border-bottom: 1px solid #ccc;
  padding: 0px;
}
.frame_header_div {
  font-size: 14px;
  height: 100%;
}
/deep/.el-card__body {
  padding: 0px;
  height: calc(100% - 30px);
}
.hred:hover {
  background-color: #ff9999;
}
.box-card{
  border:4px solid #ccc;
}
</style>